<template>
    <div>
        <div @click="clickBarChart" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <ChartRadar/>
            </n-icon>
            <Handle id="BarChart-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="BarChart-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>雷达图表</span>
        <n-drawer v-model:show="active" :width="'80vw'">
            <n-drawer-content>
                <template #header>
                    雷达图表
                </template>
                <!--获取上级节点数据 进行去除空值-->
                <n-space>
                    <n-button @click="getSuperiorData">
                        <template #icon>
                            <n-icon>
                                <Login/>
                            </n-icon>
                        </template>
                        获取上级节点数据
                    </n-button>
                    <n-button
                        @click="drawing"
                        :disabled="!selects.representative||!selects.contrast.length"
                    >
                        <template #icon>
                            <n-icon>
                                <ChartRadar/>
                            </n-icon>
                        </template>
                        绘图
                    </n-button>
                    <n-select
                        class="n-select-one"
                        placeholder="代表值"
                        v-model:value="selects.representative"
                        :options="props.data.data.title"
                        label-field="title"
                        value-field="key"
                        :disabled="!props.data.data.title"
                    />
                    <n-select
                        class="n-select-two"
                        placeholder="对比值"
                        :multiple="contrastIsMultiple"
                        v-model:value="selects.contrast"
                        :options="contrastOption"
                        @update:value="contrastUpdate"
                        label-field="title"
                        value-field="key"
                        :disabled="!props.data.data.title"
                    />
                </n-space>
                <!--展示数据-->
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div ref="chartDom" style="width: 100%;height:80%;"></div>
                <template #footer>
                    <n-button @click="active=false">完成</n-button>
                </template>
            </n-drawer-content>
        </n-drawer>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {ChartRadar, Login} from "@vicons/carbon";
import {useElementsStore} from "@/stores/elements";
import * as echarts from 'echarts';


const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'id', 'data'])
const elements = useElementsStore()
const clickBarChart = () => {
    active.value = true
    setTimeout(() => {
        if (props.data.selects) {
            Object.keys(props.data.selects).forEach(key => {
                if (selects.value.hasOwnProperty(key)) {
                    selects.value[key] = props.data.selects[key];
                }
            });
        }
        if (selects.value.representative !== null && selects.value.contrast.length !== 0) {
            drawing();
        }
    }, 1)
}
// 抽屉
const active = ref(false)
const selects = ref({
    representative: null,
    contrast: [],
    getYName: (y) => {
        for (let i of props.data.data.title) {
            if (i.key === y) {
                return i.title
            }
        }
    }
})
const contrastIsMultiple = ref(true)
const contrastUpdate = (value) => {
    if (typeof value === "object") {
        if (value[value.length - 1] === "allContrast") {
            contrastIsMultiple.value = false;
            selects.value.contrast = 'allContrast';
        }
    } else {
        if (value !== "allContrast") {
            contrastIsMultiple.value = true;
            selects.value.contrast = [value];
        }
    }
}
const contrastOption = computed(() => {
    let array = props.data.data.title === undefined ? [] : props.data.data.title
    return [{title: '全选', key: "allContrast"}, ...array]
})
const option = ref(null)
let chartDom = ref(null)

const getSuperiorData = () => {
    // 获取上级节点数据
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.data = {...j.data.data}
                    props.data.data.title.map(s => {
                        // 移除可修改
                        delete s.render
                        return s
                    })
                    return
                }
            }
        }
    }
}
const drawing = () => {
    // 绘图
    option.value = {
        title: {
            text: '雷达图'
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {}
            }
        },
        legend: {
            data: []
        },
        radar: {
            // shape: 'circle',
            indicator: []
        },
        series: [
            {
                name: 'Budget vs spending',
                type: 'radar',
                data: []
            }
        ]
    }
    let myChart = echarts.init(chartDom.value);

    let keyArray = []
    if (selects.value.contrast === 'allContrast') {
        for (let i of props.data.data.title) {
            console.log(props.data.data.title)
            console.log(i)
            if (i.key !== selects.value.representative) {
                keyArray.push(i.key)
            }
        }
    } else {
        keyArray = selects.value.contrast
    }
    // 循环对比值
    for (let i of keyArray) {
        let name = selects.value.getYName(i)
        option.value.legend.data.push(name)
        // 添加数据
        option.value.series[0].data.push({
            // 每项的对比名称
            name: name,
            // 对比值的key
            key: i,
            // 数值
            value: []
        })
    }
    for (let i of props.data.data.data) {
        option.value.radar.indicator.push({name: i[selects.value.representative]});
        for (let j in option.value.series[0].data) {
            option.value.series[0].data[j].value.push(i[option.value.series[0].data[j].key])
        }
    }
    console.log(option.value)
    props.data.selects = selects.value
    props.data.option = option.value
    option.value && myChart.setOption(option.value);
}
</script>

<style scoped lang="less">
.n-select-one {
    width: 8vw;
}

.n-select-two {
    width: 45vw;
}

.n-space {
    .n-space-span {
        position: relative;
        top: 18%;
    }
}
</style>